<template>
  <div class="swiper-wrapper">
    <swiper :options="swiperOptions">
      <slot></slot>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "HomeSwiper",
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        loop: true, // 循环
        effect: "flip", // 切换效果
        autoplay: {
          delay: 1000,
          disableOnInteraction: false, // 设置为false，用户操作swiper之后自动切换不会停止
        },
      },
      swiperList: [],
    };
  },
};
</script>

<style scoped lang="less">
.swiper-wrapper {
  // width: 100%;
  height: 100%;
  a {
    display: block;
  }
  .swiper-img {
    width: 100%;
    vertical-align: top;
  }
}
</style>
